<style lang="scss">
// 需要修改 .xz-echarts-xx
.xz-echarts-to {
  height: 400px;
  width: 100%;
}
</style>

<template>
  <!-- // 需要修改 xx-echarts-xx -->
  <div class="xz-echarts-to" :id="name"></div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      // 需要修改 xx-ThereOne
      name: "xz-ThereOne"
    };
  },
  created() {
    this.$nextTick(function() {
      // 需要修改 twotwo
      this.drow(this.name);
    });
  },
  methods: {
    drow(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "后勤人员统计图",
          x: "center",
          textStyle: {
            color: "rgb(255, 255, 255)",
            fontSize: 15
          }
        },
        color: [
          "rgb(214, 81, 255)",
          "#1e90ff",
          "rgb(255, 212, 0)",
          "#b8860b",
          "#32cd32",
          "#7b68ee",
          "#ff69b4"
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "horizontal",
          x: "center",
          data: [
            "清洁卫生",
            "园林绿化",
            "后勤物资管理",
            "治安管理",
            "生活后勤保障服务",
            "房屋维修与养护"
          ],
          y: "bottom",
          textStyle: {
            color: "rgb(255, 255, 255)"
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: {
              show: false
            },
            dataView: {
              show: false,
              readOnly: true
            },
            restore: {
              show: false
            },
            saveAsImage: {
              show: false
            }
          }
        },
        calculable: true,
        series: [
          {
            name: "占比（%）",
            type: "pie",
            radius: "55%",
            center: ["50%", "47%"],
            data: [
              {
                value: 13,
                name: "清洁卫生"
              },
              {
                value: 19,
                name: "园林绿化"
              },
              {
                value: 26,
                name: "后勤物资管理"
              },
              {
                value: 6,
                name: "治安管理"
              },
              {
                value: 21,
                name: "生活后勤保障服务"
              },
              {
                value: 15,
                name: "房屋维修与养护"
              }
            ]
          }
        ]
      });

    }
  }
};
</script>


